<template>
  <ul class="el-upload-list el-upload-list--text">
    <li
      tabindex="0"
      class="el-upload-list__item is-success"
      v-for="v in tableData"
      :key="v.id"
    >
      <a class="el-upload-list__item-name">
        <i class="el-icon-document"></i>{{ v.name }}
      </a>
      <label class="el-upload-list__item-status-label">
        <i class="el-icon-upload-success el-icon-circle-check"></i>
      </label>
      <i class="el-icon-close" @click="handleFileDelete(v)"></i>
      <i class="el-icon-close-tip">按 delete 键可删除</i>
    </li>
  </ul>
</template>
<script>
import {
  sysNoticeFilesQuery,
  sysNoticeFilesDelete,
} from "@/api/admin/system/sysNotice.js";
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 999,
        noticeId: "",
      },
      tableData: [],
    };
  },
  props: ["noticeId"],
  watch: {
    noticeId: {
      immediate: true,
      handler(v) {
        this.tableData = [];
        if (v) {
          this.listQuery.noticeId = v;
          this.getList();
        }
      },
    },
  },
  methods: {
    getList() {
      sysNoticeFilesQuery(this.listQuery).then((res) => {
        this.tableData = res.data.data;
      });
    },
    handleFileDelete(v) {
      sysNoticeFilesDelete(v.id).then((res) => {
        this.tableData = this.tableData.filter((m) => m.id != v.id);
      });
    },
  },
};
</script>